<template>
	<view class="post-detail base-maxwidth">
		<tap-nav :topBackgroundColor="topBackgroundColor"
		:backgroundColor="backgroundColor"
		:topHeight="topHeight"
		:navMarginTop="navMarginTop">
			<view class="top-info">
				<view class="user-info">
					<image class="avatar" src="https://img.zcool.cn/community/01654e5c824404a80120af9a9b6667.jpg@2o.jpg"></image>
					<view class="user-name">
						<text class="name">Gigibang</text>
						<text class="fans">粉丝：<text class="fans-num"></text>20</text>
					</view>
				</view>
				<button class="focus-btn" size="mini" type="primary">关注</button>
			</view>
		</tap-nav>
		<moment-info :photoList="photoList"></moment-info>
		<comment-info></comment-info>
	</view>
</template>
<script>
	import tapNav from '@/components/topnav/topNav.vue'
	import momentInfo from '@/components/moment/momentInfo.vue'
	import commentInfo from '@/components/comment/commentInfo.vue'
	export default {
		components: {
			tapNav,
			momentInfo,
			commentInfo
		},
		data() {
			return {
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏高度
				backgroundColor: 'rgba(255,255,255,1)',
				topBackgroundColor: '#fff',
				topHeight: 50,
				userId: Number,
				// 导航栏距离状态栏的高度
				navMarginTop: 0,
				photoList: [
					'https://img.zcool.cn/community/010e415d284bb9a80120b5ab1c1aba.jpg@1280w_1l_2o_100sh.jpg',
					'https://img.zcool.cn/community/0156ab5b418935a80120b95992188b.jpg@1280w_1l_2o_100sh.jpg',
					'https://pic1.zhimg.com/v2-ed332c80053d9653d408e63182b5e23c_r.jpg',
					'https://pic3.zhimg.com/80/v2-65c2205bd7f0f32addb6948dfce1ace6_720w.webp',
					'https://pic2.zhimg.com/80/v2-3c6245ca8b22518994505a5d49c58dbd_720w.webp',
					'https://pic3.zhimg.com/v2-73533036d2411b787aecdf4905a90a3e_r.jpg',
					'https://pic3.zhimg.com/80/v2-aa616fa99d0b7940427a6bb68ba6ec82_720w.webp'
				]
			}
		},
		props: {
			id: {
				type: String
			}
		},
		onLoad(option) {
			console.log('option',option)
			this.userId = option.id
		},
		//第一次加载时调用
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		methods: {
			goback() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100% ;
		height: 100%;
	}
	
	.top-info .user-info {
		display: flex;
		align-items: center;
		height: 100%;
		margin-left: 15px;
	}
	
	.top-info .user-info .avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}
	
	.user-info .user-name {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 90%;
		margin-left: 8px;
		margin-top: 20rpx;
	}
	
	.user-info .user-name .name {
		font-size: 14px;
		color: #323232;
	}
	
	.user-info .user-name .fans {
		margin-bottom: 6px;
		font-size: 12px;
		color: #bababa;
	}
	
	.top-info .focus-btn {
		height: 26px;
		border-radius: 13px;
		line-height: 26px;
		background-color: #517eff;
		margin-right: 100px;
	}
</style>